import React, { Component } from 'react'
// 可以受控的表单元素有:
// 1. 文本框
// 2. 密码框
// 3. 文本域
// 4. 一个复选框
// 5. 一个单选框
// 6. 下拉框
// 注意: 多个单选,多个复选框和上传文件是无法受控的

export default class App extends Component {
  state = {
    password: '',
    city: 'sh',
  }

  // pswHandle = (e) => {
  //   this.setState({
  //     password: e.target.value.trim(),
  //   })
  // }
  // cityHandle = (e) => {
  //   this.setState({
  //     city: e.target.value,
  //   })
  // }

  // handle = (e) => {
  //   const name = e.target.name
  //   this.setState({
  //     [name]: e.target.value.trim(),
  //   })
  // }
  // handle = (name) => {
  //   return (e) => {
  //     this.setState({
  //       [name]: e.target.value.trim(),
  //     })
  //   }
  // }
  // handle简写
  handle = (name) => (e) => {
    this.setState({
      [name]: e.target.value.trim(),
    })
  }

  // a = b => c => d => {

  // }

  // a = b => {
  //   return c => {
  //     return d => {

  //     }
  //   }
  // }
  render() {
    const { password, city } = this.state
    return (
      <form>
        密码:
        <input
          type="password"
          value={password}
          onChange={this.handle('password')}
          name="password"
        />
        <br />
        城市:
        {/* select的value的值如果和option的value的值相同,则对应option会被选中 */}
        <select name="city" id="" value={city} onChange={this.handle('city')}>
          <option value="sz">深圳</option>
          <option value="bj">北京</option>
          <option value="sh">上海</option>
          <option value="gz">广州</option>
        </select>
        <br />
        性别: <br />
        {/* 男: <input type="radio" /> 女: <input type="radio" /> <br />
        爱好: <br />
        抽烟: <input type="checkbox" value="smoking" />
        喝酒: <input type="checkbox" value="drinking" />
        找富婆: <input type="checkbox" value="findmoney" /> */}
      </form>
    )
  }
}
